var listDetail = '<li>';
listDetail= +'<a href="#" class="photo"><img src="../images/temp/50x60.jpg" alt="Jie Tang" /></a>';
listDetail= +'<dl>';
listDetail= +'<dt>01</dt>';
listDetail= +'<dd>H-index: 70 </dd>';
listDetail= +'<dd>Papers: 435</dd>';
listDetail= +'<dd>Citation: 55371</dd>';
listDetail= +'</dl>';
listDetail= +'<p class="info">Xifeng Yan Philip S. Yu Jian Pei Dong Xin Hong Cheng</p>';
listDetail= +'</li>';



var L = 0;	//当前第一个为li中第几个

var liW = $("#cardList li").width();	
var total = $("#cardList li").size();

//init
$("#scrollNum").html((L+1) +"/" + total); 
$("#cardList").css("width",liW * total + "px"); //设置ol宽度

//右箭头
$("#scrollRight").click(function(){
	var L = Math.floor(-parseFloat( $("#cardList").css("marginLeft"))/liW);
	
	if( L < total-1){
		//滚动条变化
		$("#scrollBlock").animate(
			{marginLeft: (L+1)/(total-1)*100 + "%"},
			100
		);
		//列表滚动
		$("#cardList").animate(
			{marginLeft: -(L+1)*liW + "px"},
			200,
			function(){	
				L++;
				$("#scrollNum").html( (L+1) +"/" + total);
			}
		);
		
	}
});

//左箭头
$("#scrollLeft").click(function(){
	var L = Math.ceil(-parseFloat( $("#cardList").css("marginLeft"))/liW);
	if(L >= 1){
		//滚动条变化
		$("#scrollBlock").animate(
			{marginLeft: (L-1)/(total-1)*100 + "%"},
			100
		);
		//列表滚动
		$("#cardList").animate(
			{marginLeft: -(L-1)*liW + "px"},
			200,
			function(){
				L --;
				$("#scrollNum").html( (L+1) +"/" + total);
			}
		);
	}
});


//滚动条
$("#scrollBlock").mousedown(function(e){
	$("#scrollBarOuter").append('<div class="temp" style="background:#fff;opacity:0;filter:alpha(opacity=0);width:880px;height:200px;margin-top:-90px;position:absolute;left:40px;"></div>');
	var blockM = e.pageX - $("#scrollBlock").offset().left;
	var BarX = $("#scrollBarOuter").offset().left;
	//$("#scrollBlock").css("position","relative");
	
	$("#scrollBarOuter").bind("mousemove",function(e){

		var blockX = e.pageX - BarX;
		if((blockX - blockM)>=0 && (blockX - blockM) <= $("#scrollBarOuter").width()){
			$("#scrollBlock").css("marginLeft",(blockX - blockM) +"px");
			var percent = -(blockX - blockM)/$("#scrollBarOuter").width()*(liW * (total)- liW);

			$("#cardList").css("marginLeft",percent + "px");
			
			$("#scrollNum").html(-(Math.floor(percent/liW)) +"/" + total); //当前数量
		}
	});

});


$(document).mouseup(function(){
	$(".temp").remove();
	$("#scrollBarOuter").unbind("mousemove");
	
});


/*function drag(blockM, e){
	$("#scrollBlock").mousemove(function(e){
		//alert(e.pageX);
		//alert($("#scrollBarOuter").offset().left);
		//e.pageX - $("#scrollBlock").offset().left;
		var blockX = e.pageX - $("#scrollBarOuter").offset().left;
	
		$("#scrollBlock").css("marginLeft",(blockX - blockM) +"px");
		
	});
}
*/
/*
$("#scrollRight").click(function(){
	if( n < total-1){
		$("#cardList li:eq(" + n +")").animate(
			{marginLeft:"-164px",
			overFlow: "hidden"},
			200,
			function(){	
				n ++;
				$("#scrollNum").html( (n+1) +"/" + total);
			}
		);
	}
});

$("#scrollLeft").click(function(){
	if(n >= 1){
		$("#cardList li:eq(" + (n-1) +")").animate(
		
			{marginLeft:"0",
			overFlow: "hidden"},
			200,
			function(){
				n --;
				$("#scrollNum").html( (n+1) +"/" + total);
			}
		);
	}
});*/